<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        // 表单需要了解两个地方：
        //  1- 如何收集表单数据
        //  2- 如何设置表单初始值
        // 受控组件：需要为其增加onChange事件，该事件负责更新数据状态（因为组件的值受到数据状态的影响,不能修改 ）
        const root = ReactDOM.createRoot(document.getElementById("root"));
        class App extends React.PureComponent {
            //状态数据
            state={
                userName:'zhangsan',
                passWord:12345,
                city:'1',
                sex:'1',
                hobby:['1','2','3']
            }
            changeHandler(e){
                //句柄
                // console.log(e.target.value);

                //判断是否是多选
            /*     if(e.target.type==='checkbox'){
                    //浅拷贝复制状态给常量copyState
                    const copyState=[...this.state[e.target.name]];
                    //根据选中的value为条件去数组中查找满足条件的下标
                    const index=copyState.findIndex(v=>v===e.target.value);
                    //如果找到
                    if(index>-1) copyState.splice(index,1);
                    else copyState.push(e.target.value);

                    //重新设置状态
                    this.setState({[e.target.name]:copyState})
                }else{
                        this.setState({
                        //通过设置状态进行受控组件的改变
                        //使用[]  获取多个表单属性值
                        [e.target.name]:e.target.value,
                    });
                } */
                

                // 代码优化
                    if(e.target.type === "checkbox"){
                    // 复制状态给予常量copyState
                    value = [...this.state[e.target.name]];
                    // 根据选中的value为条件去数组中查找满足条件的下标
                    const index = value.findIndex(v=>v===e.target.value);
                    // 如果找到了
                    if(index>-1) value.splice(index,1);
                    else value.push(e.target.value);
                }
                this.setState({
                    [e.target.name]: value,
                })
            }
            submitHandler(e){
                e.preventDefault();
                console.log('userName',this.state.userName);
                console.log('passWord',this.state.passWord);
                /* 隐式转换 为数字 */
                console.log('city',this.state.city/1);
                console.log('sex',this.state.sex/1);
                console.log("hobby", this.state.hobby);

            }

            render(){
                return(
                    //给form表单绑定提交事件获取数据
                    <form onSubmit={this.submitHandler.bind(this)}>
                        <p>用户名:<input type='text' name='userName' value={this.state.userName} onChange={this.changeHandler.bind(this)}/> </p>
                        <p>密码:<input type='password' name='passWord' value={this.state.passWord} onChange={this.changeHandler.bind(this)}/></p>
                        <p>
                            <select name = 'city' value = {this.state.city}onChange={this.changeHandler.bind(this)}>
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">武汉</option>
                                <option value="4">西安</option>
                                <option value="5">深圳</option>
                                <option value="6">南白滩</option> 
                            </select>    
                        </p>
                        <p>
                            性别:
                            <input type="radio" checked={this.state.sex==='1'} name='sex' value={1} onChange={this.changeHandler.bind(this)}/>男    
                            <input type="radio" checked={this.state.sex==='2'} name='sex' value={2} onChange={this.changeHandler.bind(this)}/>女    
                        </p>
                        <p>
                            爱好:
                            <input type="checkbox" name='hobby' onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes('1')} value={1}/>唱   
                            <input type="checkbox" name='hobby' onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes('2')} value={2} />跳 
                            <input type="checkbox" name='hobby' onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes('3')} value={3} />rap 
                            <input type="checkbox"  name='hobby' onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes('4')} value={4} />篮球
   
                        </p>
                        <button>提交</button>
                    </form>
                )
            }
        }
        root.render(<App/>)
    </script>
</body>

</html>